<template>
  <div class="common_wrap">
    <div class="common_title">
      重点关注任务详情
      <div class="back_btn" @click="goBack"><i></i><span>返回</span></div>
    </div>
    <div class="container">
      <el-form :model="info" label-width="100px">
        <el-form-item label="标题：">{{ info.title }}</el-form-item>
        <el-form-item label="内容：">{{ info.content }}</el-form-item>
        <el-form-item label="批示时间：">{{ info.issueTime }}</el-form-item>
        <el-form-item label="附件：">
          <div
            class="file_item"
            @click="downloadFile(info.annexPath)"
            style="display: flex; align-items: center; cursor: pointer"
          >
            <i class="file_icon" :class="formateFileType(info.annexName)"></i>
            <div class="content">{{ info.annexName }}</div>
          </div>
        </el-form-item>
      </el-form>
    </div>
    <div style="height: 1px; background: #ddd"></div>
    <div class="task-list" style="width: 98%; margin: 20px auto">
      <div
        class="first-box"
        style="
          margin-top: 20px;
          overflow: hidden;
          transition: 0.3s max-height cubic-bezier(0.41, -0.01, 1, 1.09);
        "
        :style="{
          maxHeight: firstItem.show ? '1000px' : '63px',
        }"
        v-for="(firstItem, index) in treeData"
        :key="index"
      >
        <div
          class="first-title"
          style="
            min-height: 53px;
            display: flex;
            align-items: center;
            justify-content: space-between;
          "
        >
          <el-tooltip
            class="item"
            effect="dark"
            :content="firstItem.name"
            placement="top-start"
          >
            <div
              class="left"
              style="
                font-size: 16px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
              "
            >
              {{ firstItem.name }}
            </div>
          </el-tooltip>

          <!-- <div style="color: #4ca5f1" @click="checkTitle(firstItem.name)">
            查看全部
          </div> -->
          <div style="cursor: pointer; width: 50px">
            <i
              :class="
                Boolean(firstItem.show)
                  ? 'el-icon-arrow-up'
                  : 'el-icon-arrow-down'
              "
              size="20"
              @click="switchShow(firstItem, firstItem.show)"
            />
            <span @click="switchShow(firstItem, firstItem.show)">
              {{ Boolean(firstItem.show) ? "收起" : "展开" }}
            </span>
          </div>

          <!-- <div class="right" style="display: flex">
              <img src="../../assets/green_tip.png" alt="" style="width: 18px; height: 18px" />
              <div style="margin-left: 5px">{{ firstItem.greenCount || 0 }}</div>
              <img src="../../assets/red_tip.png" alt="" style="width: 18px; height: 18px; margin-left: 5px" />
              <div style="margin-left: 5px">{{ firstItem.redCount || 0 }}</div>
            </div> -->
        </div>
        <!-- 一级人员 -->
        <div
          class="first-person"
          v-if="
            (firstItem.receiptDoList !== null && firstItem.catalogType == 0) ||
            !firstItem.childList
          "
        >
          <!-- 绿牌统计 -->
          <div style="display: flex; margin: 12px 0 18px">
            <img
              src="../../assets/green_tip.png"
              alt=""
              style="width: 18px; height: 18px"
            />
            <!-- <div style="margin-left: 5px">{{ firstItem.greenCount || 0 }}</div> -->
          </div>
          <!-- 绿牌人 -->
          <div style="width: 100%">
            <div class="th">
              <div class="td" style="width: 20%">姓名</div>
              <div class="td" style="width: 60%">职务</div>
              <div class="td" style="width: 20%">状态</div>
            </div>
            <div
              class="tbody"
              v-for="(person, i) in firstItem.receiptDoList.filter(
                (v) => v.dutyType == 1
              )"
              :key="i"
            >
              <div class="td" style="width: 20%">{{ person.empName }}</div>
              <div class="td" style="width: 60%">
                {{ person.empArea }} {{ person.empPost || "" }}
              </div>
              <div
                class="td"
                style="width: 20%"
                :style="{
                  color: person.checkStatus ? 'green' : 'red',
                }"
              >
                {{ person.checkStatus ? "已查看" : "未查看" }}
              </div>
            </div>
          </div>
          <!-- 红牌统计 -->
          <div style="display: flex; margin: 12px 0 18px">
            <img
              src="../../assets/red_tip.png"
              alt=""
              style="width: 18px; height: 18px"
            />
            <!-- <div style="margin-left: 5px">{{ firstItem.redCount || 0 }}</div> -->
          </div>
          <!-- 红牌人 -->
          <div style="width: 100%">
            <div class="th">
              <div class="td" style="width: 20%">姓名</div>
              <div class="td" style="width: 60%">职务</div>
              <div class="td" style="width: 20%">状态</div>
            </div>
            <div
              class="tbody"
              v-for="(person, i) in firstItem.receiptDoList.filter(
                (v) => v.dutyType == 0
              )"
              :key="i"
            >
              <div class="td" style="width: 20%">{{ person.empName }}</div>
              <div class="td" style="width: 60%">
                {{ person.empArea }} {{ person.empPost || "" }}
              </div>
              <div
                class="td"
                style="width: 20%"
                :style="{
                  color: person.checkStatus ? 'green' : 'red',
                }"
              >
                {{ person.checkStatus ? "已查看" : "未查看" }}
              </div>
            </div>
          </div>
        </div>
        <!-- 二级 -->
        <div
          class="second-box"
          v-for="(secondItem, secondIndex) in firstItem.childList"
          :key="secondIndex"
          style="
            margin: 10px auto;
            padding: 10px;
            border-radius: 8px;
            background: #fafafa;
          "
        >
          <div
            class="second-title"
            style="
              font-size: 12px;
              color: #333;
              font-weight: 500;
              display: flex;
            "
          >
            <el-tooltip
              class="item"
              effect="dark"
              :content="secondItem.name"
              placement="top-start"
            >
              <div
                class="left"
                style="
                  white-space: nowrap;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  width: 80%;
                "
              >
                {{ secondItem.name }}
              </div></el-tooltip
            >
          </div>

          <!-- 二级人员 -->
          <div class="second-person">
            <!-- 绿牌统计 -->
            <div style="display: flex; margin: 12px 0 18px">
              <img
                src="../../assets/green_tip.png"
                alt=""
                style="width: 18px; height: 18px"
              />
              <!-- <div style="margin-left: 5px">{{ secondItem.greenCount || 0 }}</div> -->
            </div>
            <!-- 绿牌人 -->
            <div style="width: 100%">
              <div class="th">
                <div class="td" style="width: 20%">姓名</div>
                <div class="td" style="width: 60%">职务</div>
                <div class="td" style="width: 20%">状态</div>
              </div>
              <div
                class="tbody"
                v-for="(person, i) in secondItem.receiptDoList.filter(
                  (v) => v.dutyType == 1
                )"
                :key="i"
              >
                <div class="td" style="width: 20%">{{ person.empName }}</div>
                <div class="td" style="width: 60%">
                  {{ person.empArea }} {{ person.empPost || "" }}
                </div>
                <div
                  class="td"
                  style="width: 20%"
                  :style="{
                    color: person.checkStatus ? 'green' : 'red',
                  }"
                >
                  {{ person.checkStatus ? "已查看" : "未查看" }}
                </div>
              </div>
            </div>
            <!-- 红牌统计 -->
            <div style="display: flex; margin: 12px 0 18px">
              <img
                src="../../assets/red_tip.png"
                alt=""
                style="width: 18px; height: 18px"
              />
              <!-- <div style="margin-left: 5px">{{ secondItem.redCount || 0 }}</div> -->
            </div>
            <!-- 红牌人 -->
            <div style="width: 100%">
              <div class="th">
                <div class="td" style="width: 20%">姓名</div>
                <div class="td" style="width: 60%">职务</div>
                <div class="td" style="width: 20%">状态</div>
              </div>
              <div
                class="tbody"
                v-for="(person, i) in secondItem.receiptDoList.filter(
                  (v) => v.dutyType == 0
                )"
                :key="i"
              >
                <div class="td" style="width: 20%">{{ person.empName }}</div>
                <div class="td" style="width: 60%">
                  {{ person.empArea }} {{ person.empPost || "" }}
                </div>
                <div
                  class="td"
                  style="width: 20%"
                  :style="{
                    color: person.checkStatus ? 'green' : 'red',
                  }"
                >
                  {{ person.checkStatus ? "已查看" : "未查看" }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "MarketManageDetail",
  data() {
    return {
      info: {},
      treeData: [],
    };
  },
  computed: {
    formateDate() {
      return function (date) {
        const time = new Date(date / 1);
        const year = time.getFullYear();
        const month =
          time.getMonth() + 1 > 9
            ? time.getMonth() + 1
            : "0" + (time.getMonth() + 1);
        const day = time.getDate() > 9 ? time.getDate() : "0" + time.getDate();
        const hour =
          time.getHours() > 9 ? time.getHours() : "0" + time.getHours();
        const minutes =
          time.getMinutes() > 9 ? time.getMinutes() : "0" + time.getMinutes();
        return year + "-" + month + "-" + day + "  " + hour + ":" + minutes;
      };
    },
    formateFileType() {
      return function (fileName) {
        if (fileName) {
          const arr = fileName.split(".");
          const type = arr[arr.length - 1];
          if (type === "docx" || type === "doc") {
            return "word";
          } else if (type === "xlsx" || type === "xls") {
            return "word";
          } else if (type === "pdf") {
            return "pdf";
          } else {
            return "";
          }
        } else {
          return "";
        }
      };
    },
  },
  created() {
    this.info = this.$route.query;
    this.getTask();
  },
  methods: {
    switchShow(obj, status) {
      this.$set(obj, "show", !status);
    },
    getTask() {
      this.$api
        .treeTask({
          mainId: this.info.id,
        })
        .then((res) => {
          if (res.status === 200) {
            this.treeData = res.data.data;
          } else {
            this.treeData = [];
          }
        })
        .catch(() => {
          this.treeData = [];
        });
    },
    goBack() {
      history.go(-1);
    },
    downloadFile(filePath) {
      window.open(filePath, "_blank");
    },
  },
};
</script>

<style scoped>
.th {
  display: flex;
  height: 36px;
  background: #f6f6fa;
  line-height: 36px;
  margin: 0 auto;
}
.th .td {
  text-align: center;
}
.tbody {
  display: flex;
  height: 36px;
  background: #fff;
  line-height: 36px;
  margin: 0 auto;
}
.tbody .td {
  text-align: center;
}
.qutoa_header {
  display: flex;
  margin-bottom: 20px;
  color: #333;
}
.qutoa_header .title {
  font-size: 18px;
  font-weight: bold;
  margin-right: 30px;
}
.qutoa_header .status {
  width: 70px;
  height: 22px;
  line-height: 22px;
  text-align: center;
  border: 1px solid #7f7f7f;
  color: #7f7f7f;
  border-radius: 5px;
}
.qutoa_header .status.success {
  border: 1px solid #4ca5f1;
  color: #4ca5f1;
}
.qutoa_header .status.fail {
  border: 1px solid #f60e36;
  color: #f60e36;
}
.qutoa_header .date {
  height: 24px;
  line-height: 24px;
  font-size: 14px;
  color: #999;
  margin-left: 20px;
}
.quota_person {
  display: flex;
  font-size: 14px;
  color: #333;
  margin-bottom: 20px;
}
.quota_person .tit {
  width: 100px;
  text-align: right;
}
.quota_content {
  display: flex;
  margin-bottom: 20px;
}
.quota_content .tit {
  width: 100px;
  text-align: right;
  font-size: 14px;
  color: #333;
  margin-right: 10px;
}
.quota_content .content {
  width: 500px;
  min-height: 100px;
  padding: 10px;
  background-color: #efefef;
  border: 1px solid #dcdcdc;
  border-radius: 5px;
  color: #666;
}
.quota_file {
  display: flex;
  margin-bottom: 20px;
}
.quota_file .tit {
  width: 100px;
  text-align: right;
  font-size: 14px;
  color: #333;
  margin-right: 10px;
}
.quota_file .file_list .file_item {
  display: flex;
  margin-bottom: 10px;
  cursor: pointer;
}
.quota_file .file_list .file_item * {
  cursor: pointer;
}
.file_item .file_icon {
  display: block;
  width: 26px;
  height: 26px;
  background: url("../../assets/file.png") no-repeat;
  background-size: 100% 100%;
  margin-right: 10px;
}
.file_item .file_icon.pdf {
  background: url("../../assets/Pdf.png") no-repeat;
  background-size: 100% 100%;
}
.file_item .file_icon.word {
  background: url("../../assets/word.png") no-repeat;
  background-size: 100% 100%;
}
.file_item .file_icon.excel {
  background: url("../../assets/excel.png") no-repeat;
  background-size: 100% 100%;
}
.quota_file .file_list .file_item > div {
  width: 400px;
  height: 26px;
  line-height: 26px;
  font-size: 16px;
  color: #666;
}
.quota_file .no_file {
  font-size: 14px;
  color: #999;
}
.btn_box {
  width: 730px;
  display: flex;
  justify-content: center;
}
</style>